<template>
    <div class="exam-detail-container">
      <!-- 考试信息部分 -->
      <div class="info-section">
        <h2 class="section-title">考试信息</h2>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">考试名称</span>
            <span class="info-content">2024年大学生职业与规划周中考试</span>
          </div>
          <div class="info-item">
            <span class="info-label">考试时间</span>
            <span class="info-content">2024-05-22 14:00:00+6:00:00</span>
          </div>
          <div class="info-item">
            <span class="info-label">参加限制</span>
            <span class="info-content">考试开始15分钟</span>
          </div>
          <div class="info-item">
            <span class="info-label">答题时间</span>
            <span class="info-content">60分钟</span>
          </div>
          <div class="info-item">
            <span class="info-label">交卷限制</span>
            <span class="info-content">考试结束之前15分钟</span>
          </div>
          <div class="info-item">
            <span class="info-label">考试说明</span>
            <span class="info-content">根据考试</span>
          </div>
          <div class="info-item">
            <span class="info-label">考试提醒</span>
            <span class="info-content">开启</span>
          </div>
          <div class="info-item">
            <span class="info-label">提醒时间</span>
            <span class="info-content">15分钟</span>
          </div>
          <div class="info-item">
            <span class="info-label">考生须知</span>
            <span class="info-content">服从考试安排</span>
          </div>
        </div>
      </div>
  
      <!-- 试卷设置部分 -->
      <div class="info-section">
        <h2 class="section-title">考试信息</h2>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">选择试卷</span>
            <span class="info-content">2024级试卷</span>
          </div>
          <div class="info-item">
            <span class="info-label">试卷调查</span>
            <span class="info-content">答疑</span>
          </div>
          <div class="info-item">
            <span class="info-label">试题排序</span>
            <span class="info-content">固定排序</span>
          </div>
          <div class="info-item">
            <span class="info-label">选项排序</span>
            <span class="info-content">固定排序</span>
          </div>
          <div class="info-item">
            <span class="info-label">合格分数</span>
            <span class="info-content">60分</span>
          </div>
        </div>
      </div>
  
      <!-- 考生信息部分 -->
      <div class="info-section">
        <h2 class="section-title">考生信息</h2>
        <el-table
          :data="candidates"
          border
          style="width: 100%"
          class="candidate-table"
        >
          <el-table-column prop="id" label="序号" width="60"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="idCard" label="证件" width="180"></el-table-column>
          <el-table-column prop="gender" label="性别" width="80"></el-table-column>
          <el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
        </el-table>
      </div>
  
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="editExam">编辑</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        candidates: [
          {
            id: 1,
            name: '张三',
            idCard: '678268872286768322',
            gender: '男',
            phone: '12288889999'
          },
          {
            id: 2,
            name: '李四',
            idCard: '678268872286768325',
            gender: '男',
            phone: '13069789456'
          },
          
        ]
      };
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      editExam() {
        // this.$router.push('/exam/edit/1'); // 假设编辑页面路由
      }
    }
  };
  </script>
  
  <style scoped>
  .exam-detail-container {
    padding: 20px;
    background-color: #fff;
  }
  
  .info-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }
  
  .section-title {
    font-size: 16px;
    color: #303133;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  
  .info-label {
    width: 100px;
    color: #606266;
    font-weight: bold;
  }
  
  .info-content {
    color: #303133;
    flex: 1;
  }
  
  .candidate-table {
    margin-top: 15px;
  }
  
  .action-buttons {
    text-align: center;
    margin-top: 30px;
  }
  
  .action-buttons .el-button {
    width: 120px;
    margin: 0 15px;
  }
  </style>